<template>
  <div class="three-canvas" ref="threeTarge"></div>
</template>

<script lang="ts">
import { defineComponent,onMounted,ref } from 'vue'
import { TEngine } from './assets/ts/TEngine'

import { basicObjectList } from './assets/ts/TBasicObject'
import { lightsList } from './assets/ts/TLights'
import { helperList } from './assets/ts/THelper'
import { codeModelList } from './assets/ts/TCodeModel'
import { framePromise, getFrame } from './assets/ts/TLoadModel'

export default defineComponent({
  setup() {
    const threeTarge = ref(null)
    
    onMounted(()=>{
        const TE = new TEngine(threeTarge.value!)
        //让App.vue只负责加减模型
        TE.addObject(...basicObjectList)
        TE.addObject(...lightsList)
        TE.addObject(...helperList)
        TE.addObject(...codeModelList)

        getFrame().then(frame=>{
          frame && TE.addObject(frame)
        })
    })
    return {
      threeTarge
    }
  },
})
</script>

<style>
.three-canvas{
  width: 100%;
  height: 100%;
}
#app{
  width: 100%;
  height: 100%;
}
</style>
